<template>
  <el-container style="height:100%;">
    <el-header class="module-header">{{$t('model.module')}}
      <el-button  @click="goBack"
                  icon="el-icon-back" style="float: right;margin: 10px 30px;">返回</el-button>
    </el-header>
    <el-main>
      <el-header style="height:80px;">
        <el-row :gutter="20">
          <el-col :span="16">
            <div class="table-info">
              <div class="table-name">{{model.aliasName}}( {{model.tableName}}  )</div>
              <div class="table-attr">
                <el-tooltip effect="dark" :content="$t('model.datasource')" placement="top">
                  <span class="el-icon-film">{{model.dataSourceName}}</span>
                </el-tooltip>
                <el-tooltip effect="dark" :content="$t('model.domain')" placement="top">
                  <span class="el-icon-collection">{{model.domainName}}</span>
                </el-tooltip>
<!--                <el-tooltip effect="dark" :content="$t('model.managedType')" placement="top">-->
<!--                  <span class="el-icon-c-scale-to-original">托管类型</span>-->
<!--                </el-tooltip>-->
                <el-tooltip effect="dark" :content="$t('model.org')" placement="top">
                  <span class="el-icon-edit">{{model.org}}组织层级</span>
                </el-tooltip>
                <el-tooltip effect="dark" :content="$t('model.userName')" placement="top">
                  <span class="el-icon-user">{{model.userName}}人员名称</span>
                </el-tooltip>
                <el-tooltip effect="dark" :content="$t('model.authNumber')" placement="top">
                  <span class="el-icon-edit">{{model.authNumber}}授权人数</span>
                </el-tooltip>
                <el-tooltip effect="dark" :content="$t('model.updateTime')" placement="top">
                  <span class="el-icon-date">{{model.updateTime}}</span>
                </el-tooltip>
                <el-tooltip effect="dark" :content="$t('model.status')" placement="top">
                  <span class="el-icon-status">{{model.status}}状态</span>
                </el-tooltip>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="table-button">
              <el-button
                type="primary"
                @click="multiQualityBtnClick"
                icon="el-icon-plus"
              >{{$t('model.quality')}}</el-button>
              <el-button
                type="success"
                @click="multiMaskBtnClick"
                icon="el-icon-plus"
              >{{$t('model.desensitization')}}</el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-main style="height: 90%;">
        <el-tabs style="height: 100%;" id="table-tabs" v-model="activeTabName" :before-leave="beforeLeave" @tab-click="handleTabClick">
          <el-tab-pane :key="'columninfo'" name="columninfo">
            <span slot="label">
              <el-tooltip effect="dark" :content="$t('model.column-info')" placement="top">
                <span class="el-icon-collection"></span>
              </el-tooltip>
            </span>
            <v-columninfo v-if="isColumninfo"
              :tableId="model.id"
              :displayAlias="displayAlias"
              :displayNumber="displayNumber"
              :columnInfoData="columnInfoData"
            ></v-columninfo>
          </el-tab-pane>
          <el-tab-pane :key="'modelDataDetail'" name="modelDataDetail">
            <span slot="label">
              <el-tooltip effect="dark" :content="$t('model.data-info')" placement="top">
                <span class="el-icon-film"></span>
              </el-tooltip>
            </span>
           <v-modelDataDetail v-if="isModelDataDetail"
              :tableId="model.id"
              :displayAlias="displayAlias"
              :displayNumber="displayNumber"
              :columnInfoData="columnInfoData"
            ></v-modelDataDetail>
          </el-tab-pane>
          <el-tab-pane  :key="'modelDataAnalyse'" name="modelDataAnalyse">
            <span slot="label">
              <el-tooltip effect="dark" :content="$t('model.data-analysis')" placement="top">
                <span class="el-icon-share"></span>
              </el-tooltip>
            </span>
            <v-modelDataAnalyse v-if="isModelDataAnalyse"
              :tableId="model.id"
              :displayAlias="displayAlias"
              :displayNumber="displayNumber"
              :columnInfoData="columnInfoData"
            ></v-modelDataAnalyse>
          </el-tab-pane>
          <el-tab-pane>
            <span slot="label" style="margin-left:550%">
              <el-checkbox v-model="displayAlias">{{$t('model.display-alias')}}</el-checkbox>
              <span style="margin-left:10px;">{{$t('model.display-number')}}:</span>
              <el-input
                style="margin-left:5px;width:100px;"
                v-model="displayNumber"
                size="small"
                clearable
                :placeholder="$t('model.input-display-number')"
              ></el-input>
            </span>
          </el-tab-pane>
<!--          <el-row>-->
<!--          <el-col>-->
<!--            <el-button  @click="goBack"-->
<!--                        icon="el-icon-back">返回</el-button>-->
<!--          </el-col>-->
<!--        </el-row>-->
        </el-tabs>

      </el-main>
    </el-main>
    <v-multiQualityRuleDialog
      :dialogVisible="multiQualityDialogVisiable"
      :tableId="model.id"
      :columnInfoData="columnInfoData"
      @qualityDialogClose="multiqualityDialogClose"
      @qualityDialogSave="multiqualityDialogSave"
    ></v-multiQualityRuleDialog>
    <v-multiMaskRuleDialog
      :dialogVisible="multiMaskDialogVisiable"
      :tableId="model.id"
      :columnInfoData="columnInfoData"
      @maskDialogClose="multimaskDialogClose"
      @maskDialogSave="multimaskDialogSave"
    ></v-multiMaskRuleDialog>
  </el-container>
</template>
<script>
import columnInfo from "./view/ColumnInfo";
import modelDataDetail from "./view/ModelDataDetail";
import modelDataAnalyse from "./view/ModelDataAnalyse";
import multiQualityRuleDialog from "./view/MultiQualityRuleDialog";
import multiMaskRuleDialog from "./view/MultiMaskRuleDialog";
export default {
  components: {
    "v-columninfo": columnInfo,
    "v-modelDataDetail":modelDataDetail,
    "v-modelDataAnalyse":modelDataAnalyse,
    "v-multiMaskRuleDialog": multiMaskRuleDialog,
    "v-multiQualityRuleDialog": multiQualityRuleDialog
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
    var _this = this;
    -this.getModelInfo();
    _this.EventBus.$on("getColumnInfoData", () => {
      _this.getColumnInfoData();
    });
    this.getColumnInfoData();
  },
  methods: {
    handleTabClick(tab){
       if (tab.name === 'modelDataAnalyse') {
        this.isModelDataAnalyse=true
        this.isColumninfo=false
         this.isModelDataDetail=false
      } else if (tab.name === 'modelDataDetail') {
        this.isModelDataAnalyse=false
        this.isColumninfo=false
         this.isModelDataDetail=true
      }else{
         this.isModelDataAnalyse=false
         this.isColumninfo=true
         this.isModelDataDetail=false
      }
    },
    //获取表信息
    getModelInfo(){
      let _this=this;
      let tableId=this.$route.query.id;
      this.axios.post(this.HOST + "model/findById", {id:tableId}).then(function (res) {
                if(res.data.status=="1"){
                  _this.model=res.data.data[0];
                  console.log(res);
                  debugger
                }else{
                  console.log(res.stackmessage);
                }
              }
      ).catch(function (err) {
        console.log(err);
      });
    },
    //切换标签页前事件
    beforeLeave(activeIndex, oldActiveIndex) {
      if (activeIndex == 3) {
        return false;
      }
    },
    multiQualityBtnClick() {
      this.multiQualityDialogVisiable = true;
    },
    multiMaskBtnClick() {
      this.multiMaskDialogVisiable = true;
    },
    multiqualityDialogClose(data) {
      this.multiQualityDialogVisiable = false;
    },
    multiqualityDialogSave(data) {
      this.EventBus.$emit("getColumnInfoData");
      this.multiQualityDialogVisiable = false;
    },
    multimaskDialogClose() {
      this.multiMaskDialogVisiable = false;
    },
    multimaskDialogSave() {
      this.EventBus.$emit("getColumnInfoData");
      this.multiMaskDialogVisiable = false;
    },
    goBack(){
      this.$router.push({
        path: "/"
      });
    },
    //查询模型字段方法
    getColumnInfoData() {
      var _this = this;
      this.model.id=111111;
      this.axios
        .post(this.HOST + "modelcolumn/getColumnInfoData", {
          tableId: _this.model.id
        })
        .then(function(res) {
          res = res.data;
          if (res.status == "1") {
            _this.columnInfoData = res.data;
          } else {
            console.log(res.stackmessage);
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    }
  },
  data() {
    return {
      model: {
      },
      displayAlias: true,
      displayNumber: 10000,
      columnInfoData: [],
      multiQualityDialogVisiable: false,
      multiMaskDialogVisiable: false,
      isModelDataAnalyse:false,
      isColumninfo:true,
      isModelDataDetail:false,
      // 默认第一个Tab
      activeTabName: 'columninfo',
    };
  }
};
</script>
<style scoped>
.module-header {
  line-height: 60px;
  text-align: start;
  background-color: #ccc;
}
.el-row {
  width: 100%;
  height: 100%;
}
.table-info {
  width: 100%;
  height: 100%;
  line-height: 40px;
  border-bottom: 1px solid;
  background: url("./images/table-info.png") no-repeat 5% 50%;
  background-size: contain;
  padding-left: 13%;
  text-align: left;
}
.table-button {
  width: 100%;
  height: 100%;
  line-height: 80px;
  border-bottom: 1px solid;
}

.table-info span {
  margin-right: 8px;
  text-indent: 2px;
}
</style>
